<!-- 积分记录 -->
<template>
	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
	
  <view class="points-record-page">
    <!-- 导航栏 -->


    <!-- 积分记录列表 -->
    <view class="record-list">
      <!-- 记录项 -->
      <view class="record-item" v-for="(record, index) in recordList" :key="record.id">
        <!-- 左侧：类型图标 + 描述 + 时间 -->
        <view class="record-left">
          <view class="record-icon">
            <text class="iconfont icon-31jifen"></text>
            <!-- <wd-icon 
              :name="record.points > 0 ? 'add' : 'minus'" 
              size="24rpx" 
              color="#fff"
            ></wd-icon> -->
          </view>
          <view class="record-info">
            <text class="record-type text12">{{ record.type }}</text>
            <text class="record-time text11">{{ record.time }}</text>
          </view>
        </view>

        <!-- 右侧：积分变动 -->
        <view class="record-right">
          <text class="points text12" :class="record.points > 0 ? 'points-in' : 'points-out'">
            {{ record.points > 0 ? '+' : '' }}{{ record.points }}
          </text>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="recordList.length === 0">
        <wd-icon name="empty" size="80rpx" color="#ccc"></wd-icon>
        <text class="empty-text">暂无积分记录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'uni-mini-router'
import { volunteer_points_recordApi } from '@/api/volunteer'
	import {
		useFontSizeStore
	} from '@/stores/fontSizeStore';
	const fontSizeStore = useFontSizeStore();

// 路由实例
const router = useRouter()

// 简化的积分记录数据（无status字段）
const recordList = ref([])

onMounted(() => {
  volunteer_points_recordApi({
    id: "",
    "role": ""
  }).then((res) => {
    if (res.code == 200) {
      recordList.value = res.data
    }
  })
})

// 返回上一页
const handleBack = () => {
  // router.back()
}
</script>

<style lang="less" scoped>
.points-record-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 记录列表样式 */
.record-list {
  padding: 20rpx;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx;
  margin-bottom: 15rpx;
  background-color: #fff;
  border-radius: 12rpx;
}

/* 左侧内容 */
.record-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.record-icon {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  &.increase {
    background-color: #52c41a;
    /* 积分增加-绿色 */
  }

  &.decrease {
    background-color: #ff4d4f;
    /* 积分减少-红色 */
  }
}

.record-info {
  .record-type {
    font-size: 28rpx;
    color: #333;
    display: block;
    margin-bottom: 5rpx;
  }

  .record-time {
    font-size: 24rpx;
    color: #999;
  }
}

/* 右侧积分 */
.record-right {
  .points {
    font-size: 30rpx;
    font-weight: 500;

    &.points-in {
      color: #52c41a;
    }

    &.points-out {
      color: #ff4d4f;
    }
  }
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
  color: #ccc;

  .empty-text {
    margin-top: 30rpx;
    font-size: 28rpx;
  }
}
.icon-31jifen{
	font-size: 30px;
}
</style>
